<template>
    <div class="header">
      <div class="header-left">
        <span class="iconfont backicon">&#xe658;</span>
      </div>
      <div class="header-input">
        <span class="iconfont">&#xe63c;</span>
        <!--输入城市/景点/游戏主题-->
        <input type="text" style="border: 0" placeholder="输入城市/景点/游戏主题">
      </div>
      <div class="header-right">
        <router-link to="/city">
          {{city}}<span class="iconfont">&#xe65c;</span >
        </router-link>
      </div>
    </div>
</template>

<script>
export default {
  name: 'homeheader',
  data () {
    return {
      city: this.$store.state.city
    }
  }
}
</script>

<style scoped>
  .header{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 50px;
    line-height:50px;
    background: #00d3d3;
  }
  a{
    color: #fff;
  }
  .header-left{
    width: 12%;
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .backicon{
    font-size: 32px;
  }
  .header-input{
    flex: 1;
    background: #fff;
    line-height: 38px;
    padding-left: 15px;
    border-radius: 5px;
    color: #ececec;
  }
  .header-right{
    min-width: 17%;
    padding: 0 2px;
    text-align: center;
    color: #fff;
  }
  input{
    width: 90%;
    background:none;
    outline:none;
    line-height: 35px;
    border:0px;
    padding: 0 10px;
  }
  input[type="text"]:focus,
  input[type="password"]:focus {
    border: 0;
    outline: none;
  }
  input:-ms-input-placeholder{
    color: #ececec;
  }/* Internet Explorer 10+ */
  input::-webkit-input-placeholder{
    color: #ececec;
  }/* WebKit browsers */
  input::-moz-placeholder{
    color: #ececec;
  } /* Mozilla Firefox 19+ */
  input:-moz-placeholder{
    color: #ececec;
  }/* Mozilla Firefox 4 to 18 */
</style>
